<template>
  <div class="paymentway">
    <div class="paymentway_top">
      <div class="paymentway_top_left">
        <img src="../../../public/left.gif" alt="" @click="handleClick()" />
      </div>
      <div class="paymentway_top_title">支付</div>
    </div>
    <div class="paymentway_conter">￥{{ this.freight }}</div>
    <div class="paymentway_bottom">
      <div class="paymentway_bottom_box_title">
        <span class="box_title">选择第三方支付方式</span>
      </div>
      <div class="paymentway_bottom_box">
        <img src="../../../public/wx_03.gif" alt="" />微信支付
        <van-radio-group v-model="radio" class="paymentway_bottom_box_radio">
          <van-radio name="1" checked-color="#f99a06"></van-radio>
        </van-radio-group>
      </div>
      <div class="paymentway_bottom_box">
        <img
          src="../../../public/zfb_06.gif"
          alt=""
        />支付宝支付<van-radio-group
          v-model="radio"
          class="paymentway_bottom_box_radio"
        >
          <van-radio name="2" checked-color="#f99a06"></van-radio>
        </van-radio-group>
      </div>
      <div class="paymentway_bottom_box">
        <img src="../../../public/yh_08.gif" alt="" />银行卡支付<van-radio-group
          v-model="radio"
          class="paymentway_bottom_box_radio"
        >
          <van-radio name="3" checked-color="#f99a06"></van-radio>
        </van-radio-group>
      </div>
    </div>
    <div class="paymentway_sure" @click="handleClicksure">确定</div>
  </div>
</template>

<script>
export default {
  created() {
    this.freight = this.$route.query.num;
  },
  data() {
    return {
      freight: 0, //运费
      radio: "0",
      text: "",
    };
  },
  methods: {
    handleClick() {
      //返回上一页
      this.$router.go(-1);
    },
    handleClicksure() {
      if (this.radio == 1) {
        this.text = "微信";
      } else if (this.radio == 2) {
        this.text = "支付宝";
      } else {
        this.text = "银行卡";
      }
      // const num = this.freight;
      // const text = this.text;
      this.$router.push({
        path: "/paymentmiddle",
        query: { num: this.freight, text: this.text },
      });
    },
  },
};
</script>

<style  lang="scss" scoped>
.paymentway {
  width: 100%;
  height: 100vh;
  background: #f2f2f2;
}
.paymentway_top {
  width: 100%;
  height: 50px;
  position: relative;
  background: #4483ec;
  box-shadow: 0px 0px 10px #000;
}
.paymentway_top_title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}
.paymentway_conter {
  width: 100%;
  height: 130px;
  margin-top: 30px;
  line-height: 130px;
  text-align: center;
  font-size: 28px;
  color: #ff0033;
  background: #fff;
}
.paymentway_bottom {
  width: 100%;
  height: 220px;
  margin-top: 40px;
  background: #f2f2f2;
  display: flex;
  flex-direction: column;
}
.paymentway_bottom_box_title {
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-bottom: 10px;
  background: #fff;
  color: #ccc;
  font-size: 14px;
}
.box_title {
  display: block;
  margin-left: 30px;
}
.paymentway_bottom_box {
  width: 100%;
  height: 50px;
  display: flex;
  line-height: 50px;
  position: relative;
  background: #fff;
  margin-bottom: 10px;
}
.paymentway_bottom_box_radio {
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translate(-50%, -50%);
}
.paymentway_sure {
  width: 90%;
  line-height: 40px;
  background: #138bec;
  position: fixed;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 20px;
  border-radius: 30px;
  box-shadow: 6px 6px 10px #666363;
}
</style>